<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>jQuery Calendar Documentation</title>
		<meta name="description" content="Documentation for the jQuery calendar (popup calendar / date picker) built on the jQuery javascript library." />
		<meta name="author" content="Marc Grabanski" />
		<meta name="copyright" content="Copyright (c) 2005 Marc Grabanski" />
		<meta name="keywords" content="jquery calendar documentation, jquery popup calendar, api, javascript calendar, jquery date picker" />
		<style type="text/css">
			#header a {	color: #eee; }
			#header, #header div { border-bottom: 0; }
			h2 { padding: 0.5em; background: #fff; }
			#content { padding: 0; border: 0; }
			code { font-size: 1em; overflow: hidden; }
			table {
				table-layout:fixed;
				width:100%;
				overflow:hidden;
				word-wrap:break-word;
			}
			td { padding: 0; }
			tr { background: #F9F9F9; }
			tr.alt { background: #eee; }
			th { text-align: left; padding-left: 0.5em; }
			thead td {
				background: #555;
				color: #eee;
				font-size: 120%;
				padding: 0.5em;
			}
			ul { list-style: none; padding: 0; }
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="content">
				<h2>Calendar Settings</h2>
				<table cellpadding="0" cellspacing="0" border="0">
					<thead>
						<tr>
							<td style="width: 130px;">Setting</td>
							<td>Explanation</td>
						</tr>
					</thead>
					<tr class="alt">
						<th>clearText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display for the clear link.</li>
								<li>@example: <pre><code>clearText = 'Clear';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>closeText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display for the close link.</li>
								<li>@example: <pre><code>closeText = 'Close';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>prevText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display for the previous month link.</li>
								<li>@example: <pre><code>prevText = '&amp;lt;Prev';</code></pre></li>
							</ul>
					  </td>
					</tr>
					<tr class="alt">
						<th>nextText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display for the next month link.</li>
								<li>@example: <pre><code>nextText = 'Next&amp;gt;';</code></pre></li>
							</ul>
					  </td>
					</tr>
					<tr>
						<th>currentText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display for the current month link.</li>
								<li>@example: <pre><code>currentText = 'Today';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>dayNames</th>
						<td>
							<ul>
								<li>@type: Array [DayNames]</li>
								<li>@desc: The list of day names starting from Sunday.</li>
								<li>@example: <pre><code>dayNames = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>monthNames</th>
						<td>
							<ul>
								<li>@type: Array [MonthNames]</li>
								<li>@desc: The list of month names.</li>
								<li>@example: <pre><code>monthNames = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>dateFormat</th>
						<td>
							<ul>
								<li>@type: String [format]</li>
								<li>@desc: The format for parsed and displayed dates - first three characters are day, month, year in the required order, fourth is the separator, e.g. US would be 'MDY/'</li>
								<li>@example: <pre><code>dateFormat = 'MDY/';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>appendText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: The text to display after each date field, e.g. to show the required format.</li>
								<li>@example: <pre><code>appendText = ' (yyyy-mm-dd)';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>speed</th>
						<td>
							<ul>
								<li>@type: String [slow, medium or fast] or Number [milliseconds]</li>
								<li>@desc: Control the speed at which the calendar appears, it may be a time in milliseconds, a descriptive name ('slow', 'medium', 'fast'), or '' for immediately.</li>
								<li>@example: <pre><code>speed = 'medium';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>firstDay</th>
						<td>
							<ul>
								<li>@type: Number [DayofWeek]</li>
								<li>@desc: Set the first day of the week, Sunday = 0, Monday = 1, ...</li>
								<li>@example: <pre><code>firstDay = 0;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>yearRange</th>
						<td>
							<ul>
								<li>@type: String [-int:+int] or ['yyyy:yyyy']</li>
								<li>@desc: Control the range of years displayed in the year drop-down, either relative to current year (-nn:+nn) or absolute (nnnn:nnnn), e.g. '2000:2020'.</li>
								<li>@example: <pre><code>yearRange = '-10:+10';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>minDate</th>
						<td>
							<ul>
								<li>@type: Date Object [Date(yyyy, m - 1, dd)]</li>
								<li>@desc: Set a minimum selectable date, or null for no limit.</li>
								<li>@example: <pre><code>minDate = new Date(2000, 7 - 1, 1); // 01-Jul-2000</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>maxDate</th>
						<td>
							<ul>
								<li>@type: Date Object [Date(yyyy, m - 1, dd)]</li>
								<li>@desc: Set a maximum selectable date, or null for no limit.</li>
								<li>@example: <pre><code>maxDate = new Date(2009, 6 - 1, 30); // 30-Jun-2009</code></pre></li>
							</ul>
					  </td>
					</tr>
					<tr>
						<th>autoPopUp</th>
						<td>
							<ul>
								<li>@type: String (focus, button or both)</li>
								<li>@desc: Have the calendar appear automatically when the field receives focus (focus), appear only when a button is clicked (button), or appear when either event takes place (both).</li>
								<li>@example: <pre><code>autoPopUp = true;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>buttonText</th>
						<td>
							<ul>
								<li>@type: String [text]</li>
								<li>@desc: Use the following in conjunction with autoPopUp = false The text to display on the popup button.</li>
								<li>@example: <pre><code>buttonText = 'Calendar';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>buttonImage</th>
						<td>
							<ul>
								<li>@type: String (Path)</li>
								<li>@desc: The URL for the popup button image, if set button text becomes the alt value and is not directly displayed.</li>
								<li>@example: <pre><code>buttonImage = '/images/calendar.gif';</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>buttonImageOnly</th>
						<td>
							<ul>
								<li>@type: Bool (True or False)</li>
								<li>@desc: Place an image after the field without a button.</li>
								<li>@example: <pre><code>buttonImageOnly = true;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>closeAtTop</th>
						<td>
							<ul>
								<li>@type: Bool (True or False)</li>
								<li>@desc: Position the clear/close links at the top or bottom.</li>
								<li>@example: <pre><code>closeAtTop = true;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>showOtherMonths</th>
						<td>
							<ul>
								<li>@type: Bool (True or False)</li>
								<li>@desc: Display dates in other months (non-selectable).</li>
								<li>@example: <pre><code>showOtherMonths = true;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>customDate</th>
						<td>
							<ul>
								<li>@type: Function</li>
								<li>@desc: The function takes a date as a parameter and must return an array with [0] = true/false indicating whether or not this date is selectable and [1] = CSS class name(s) or '' for custom presentation. </li>
								<li>@example: <pre><code>customDate = nationalDays;
								
natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
			[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']];
function nationalDays(date) {
	for (i = 0; i < natDays.length; i++) {
		if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
			return [false, natDays[i][2] + '_day'];
		}
	}
	return [true, ''];
}</code></pre></li>
								<li>@note: One built in function of this type exists called "noWeekends".</li>
								<li>@example: <pre><code>customDate = popUpCal.noWeekends;</code></pre></li>
							</ul>
						</td>
					</tr>
					<tr class="alt">
						<th>fieldSettings</th>
						<td>
							<ul>
								<li>@type: Function</li>
								<li>@desc: Can be a function that takes an input field and returns a settings(anonymous) object to update the calendar with.</li>
								<li>@example: <pre><code>function customSettings(input) {
	range = (input.className == 'calendarFocus' ? 5 : 
		(input.className == 'calendarButton' ? 7 : 10));
	return {yearRange: '-' + range + ':+' + range, 
		minDate: (input.id == 'dTo' ? getDate($('#dFrom')) : defaultMinDate), 
		maxDate: (input.id == 'dFrom' ? getDate($('#dTo')) : defaultMaxDate)};
}</code></pre>

Then in the initialize function add: 
<pre><code>$('.calendarFocus').calendar({appendText: ' (default format dd/mm/yyyy)'});
$('.calendarButton').calendar({appendText: ' ', autoPopUp: 'button'});
$('.calendarBoth').calendar({autoPopUp: 'both', buttonImageOnly: true, 
	buttonImage: 'img/calendar.gif', buttonText: 'Calendar'});
$('.calendarRange').calendar(); // Same as above</code></pre></li>
							</ul>
						</td>
						<tr>
							<th>changeFirstDay</th>
							<td>
								<ul>
									<li>@type: Bool (True or False)</li>
									<li>@desc: Allows you to click on the day names to have the week start on that day. You can disable this feature by setting the changeFirstDay attribute to false.</li>
									<li>@example: <pre><code>changeFirstDay = false;</code></pre></li>
								</ul>
							</td>
						</tr>
						<tr>
							<th>inline</th>
							<td>
								<ul>
									<li>@type: bool</li>
									<li>@desc: Allows you to show the calendar at all times. You must attach the calendar to a div in order for it to work. NOTE:This does not work with multiple calendars on the page).</li>
									<li>@example: <pre><code>inline = true;</code></pre></li>
								</ul>
							</td>
						</tr>
						<tr>
							<th>customEvent</th>
							<td>
								<ul>
									<li>@type: Function</li>
									<li>@desc: Allows you to define your own event when the calendar is selected.  Use this with inline calendar.</li>
									<li>@example: <pre><code>customEvent:function () {
	alert(this.date);
}</code></pre></li>
								</ul>
							</td>
						</tr>
				</table>
			</div>
		</div>
    </body>
</html>